
<!-- 检测项目看板 -->

<template>
  <div class="backlog">
    <div class="backlog-title">
      <div class="backlog-title-left">
        <div class="logo"></div>
        检测项目看板
      </div>
      <div class="backlog-title-right">
        <div class="date">2022年11月</div>
        <div class="swiper">
          <div class="swiper-leftArrows">
            <img
              src="@/assets/icons/左双箭头.png"
              alt=""
              @click="
                () => {
                  swiper('左');
                }
              "
            />
          </div>
          <div class="swiper-box">
            <div class="swiper-box-subBox" ref="swiper">
              <div v-for="(item, i) in 5" :key="i">{{ item }}周</div>
            </div>
          </div>
          <div class="swiper-rightArrows">
            <img
              src="@/assets/icons/右双箭头.png"
              alt=""
              @click="
                () => {
                  swiper('右');
                }
              "
            />
          </div>
        </div>
      </div>
    </div>
    <div class="backlog-content">
      <div class="backlog-content-head">
        <div class="left">设备</div>
        <div class="right" ref="parentBox">
          <div class="right-item" v-for="(item, i) in 14" :key="i">
            <div>{{ item + 9 }}</div>
            <div>Thur</div>
          </div>
        </div>
      </div>
      <div class="backlog-content-body">
        <!-- <div class="list">
          <div class="list-left">设备1</div>
          <div class="list-right"></div>
        </div> -->
        <vue-seamless-scroll
          :data="listData"
          class="seamless-warp"
          :class-option="classOption"
        >
          <div class="list" v-for="(item, index) in listData" :key="index">
            <div class="list-left">{{ item.name }}</div>
            <div class="list-right">
              <div
                v-for="(val, i) in item.orderList"
                :key="i"
                class="order"
                :style="{
                  width: dayW * val.days + 'px',
                  background: colorArr[Math.floor(Math.random() * colorArr.length)],
                  left: dayW * val.startWidth + 'px',
                }"
              >
                {{ val.days }}day
              </div>
            </div>
          </div>
        </vue-seamless-scroll>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dayW: null, // 一天对应的宽（用于计算长度和偏移量）
      colorArr: [
        "rgba(235, 51, 173, 0.5)",
        "rgba(102, 235, 229, 0.5)",
        "rgba(0, 255, 0, 0.5)",
        "rgba(246, 206, 110, 0.5)",
        "rgba(252, 1, 26, 0.5)",
        "rgba(75, 4, 136, 0.5)",
      ],
      listData: [
        {
          name: "项目1",
          orderList: [
            { days: 8, startTime: "2022-11-14 12:00:00" },
            { days: 3, startTime: "2022-11-11 00:00:00" },
          ],
        },
        {
          name: "项目2",
          orderList: [
            { days: 3, startTime: "2022-11-11 12:00:00" },
            { days: 1, startTime: "2022-11-10 12:00:00" },
            // { days: 9, startTime: "2022-11-10 00:00:00" },
            //  { days: 0.3, startTime: "2022-11-16 00:00:00" },
          ],
        },
        {
          name: "项目3",
          orderList: [
            { days: 1, startTime: "2022-11-11 00:00:00" },
            { days: 2, startTime: "2022-11-13 12:00:00" },
            { days: 3, startTime: "2022-11-15 12:00:00" },
            { days: 2, startTime: "2022-11-18 12:00:00" },
            { days: 1, startTime: "2022-11-21 12:00:00" },
          ],
        },
         {
          name: "项目4",
          orderList: [
            { days: 4, startTime: "2022-11-14 12:00:00" },
          ],
        },
        {
          name: "项目5",
          orderList: [
            { days: 15, startTime: "2022-11-10 00:00:00" },
          ],
        },
        {
          name: "项目6",
          orderList: [
            { days: 4, startTime: "2022-11-11 00:00:00" },
             { days: 3, startTime: "2022-11-16 00:00:00" },
          ],
        },
         {
          name: "项目7",
          orderList: [
            { days: 9, startTime: "2022-11-11 00:00:00" },
          ],
        },
      ],
    };
  },
  methods: {
    // 格式化数据
    formatData() {
      this.listData = this.listData.map((item) => {
        item.orderList = item.orderList.map((val) => {
          val.startWidth = this.timeQuantum(
            "2022-11-10 00:00:00",
            val.startTime
          );
          return val;
        });
        return item;
      });
      console.log(this.listData);
    },
    // 点击箭头切换周
    swiper(flag) {
      let swiper = this.$refs.swiper;
      let left = swiper.offsetLeft;
      let width = swiper.scrollWidth / 5;
      let maxLeft = width * 3;
      if (flag === "左" && left !== 0) {
        left = left + width;
      }
      if (flag === "右" && Math.abs(left) < maxLeft) {
        left = left - width;
      }
      swiper.style.left = left + "px";
    },
    // 计算两个时间相隔多少天
    timeQuantum(startTime, endTime) {
      //startTime, endTime
      let start = new Date(startTime).getTime();
      let end = new Date(endTime).getTime();
      let days = (end - start) / 24 / 60 / 60 / 1000;
      return days;
    },
  },
  computed: {
    classOption() {
      return {
        step: 0.9, //滚动的速度
        limitMoveNum: 7, //开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, //鼠标悬停，true/false
        direction: 1, //滚动的方向，0向下 1向上 2向左 3向右
        openWatch: true, //开启数据实时监控刷新dom，true/false
        singleHeight: 0, //滚动多少高度停留一次
        singleWidth: 0, //无缝不停止的滚动
        waitTime: 1000, //单步运动停止的时间(默认值1000ms)
      };
    },
  },
  mounted() {
    // 格式化
    this.formatData();
    // 计算每天对应的宽
    this.dayW = this.$refs.parentBox.clientWidth / 14;
  },
  created() {},
};
</script>

<style lang='scss' scoped>
.backlog {
  height: 100%;
  padding: 0 0.1rem;
  &-title {
    height: 0.45rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &-left {
      display: flex;
      align-items: center;
      font-size: 0.14rem;
      font-weight: bold;
      .logo {
        width: 0.1rem;
        height: 0.3rem;
        background-color: rgb(209, 46, 46);
        margin-right: 0.1rem;
      }
    }
    &-right {
      display: flex;
      align-items: center;
      & > .swiper {
        border: 1px solid rgba(13, 194, 240, 0.2);
        padding: 0 0.05rem;
        margin-left: 0.15rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        & img {
          width: 0.15rem;
        }
        .swiper-box {
          height: 0.3rem;
          width: 1rem;
          margin: 0 0.05rem;
          overflow: hidden;
          position: relative;
          &-subBox {
            height: 100%;
            position: absolute;
            display: flex;
            align-items: center;
            // left: -1rem;
            // background-color: rgb(197, 45, 139);
            & > div {
              width: 0.5rem;
              display: flex;
              align-items: center;
              justify-content: center;
              color: #53cdfc;
              font-weight: bold;
            }
          }
        }
      }
    }
  }
  &-content {
    height: calc(100% - 0.55rem);
    &-head {
      height: 0.5rem;
      display: flex;
      align-items: center;
      background-color: #f1f1f1;
      border-bottom: 1px solid #53cdfc;
      .left {
        width: 1rem;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 0.14rem;
        font-weight: bold;
        background-color: #ffffff;
        border-right: 1px solid #53cdfc;
      }
      .right {
        width: calc(100% - 1rem);
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        &-item {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
      }
    }
    &-body {
      height: calc(100% - 0.5rem);
      background-color: #fcfcfc;
      overflow: hidden;
      .list {
        height: 0.45rem;
        display: flex;
        border-bottom: 1px solid rgba(3, 3, 3, 0.3);
        &-left {
          width: 1rem;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 0.14rem;
          background-color: #ffffff;
          border-right: 1px solid #53cdfc;
        }
        &-right {
          width: calc(100% - 1rem);
          height: 100%;
          position: relative;
          display: flex;
          align-items: center;
          & > .order {
            height: 60%;
            border-radius: 0.15rem;
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }
    }
  }
}
</style>